<template>
	<view class="qj-detail">
		<view class="my-list2">
			<view v-if="!obj"><u-empty text="没有数据"></u-empty></view>

			<view class="ml-item-detail" v-else style="height: 85vh;overflow: auto;">
				<view class="i-title">
					<view>
						<view class="tip-icon"></view>{{obj.abnormalityType == '0'?'违章':'事故'}}
					</view>

				</view>
				<view class="i-footer">
					<view>
						状态：{{obj.abnormalityStatus =='WAIT_DRIVER_OPER'?'待驾驶员处理':obj.abnormalityStatus =='WAIT_MANAGER_CHECK'?'待管理员审核':obj.abnormalityStatus =='CHECKED'?'审核通过':obj.abnormalityStatus =='REFUESD'?'审核不通过':'' }}
					</view>
				</view>
				<view class="i-row">师傅：{{obj.driverInfo}}</view>
				<view class="i-row">车牌：{{obj.plateNum}}</view>
				<view class="i-row">时间：{{obj.abnormalityTime}}</view>
				<view class="i-row">备注：{{obj.note?obj.note:''}}</view>
				<view class="i-row">
					<view class="r-title">备注图片：</view>
				</view>
				<view v-if='obj.abnormalityUrl' style="display: flex;">
					<view v-for="item in abnormalityUrl_list" @click="image_btn( 'https://cba360.com'+item)"
						style="width: 300rpx;height: 300rpx;display: flex;">
						<u-image style="width: 300rpx;height: 300rpx;display: flex;" width="300rpx" height="300rpx"
							:src="'https://cba360.com'+item"></u-image>
					</view>
				</view>
				<view class="i-row">
					<view class="r-title">驾驶员处理图片：</view>
				</view>
				<view v-if='obj.proveUrl' style="display: flex;">
					<view v-for="item in proveUrl_list" @click="image_btn( 'https://cba360.com'+item)"
						style="width: 300rpx;height: 300rpx;display: flex;">
						<u-image style="width: 300rpx;height: 300rpx;display: flex;" width="300rpx" height="300rpx"
							:src="'https://cba360.com'+item"></u-image>
					</view>
				</view>
				<view v-if='obj.proveUrl' style="display: flex;">
					<view v-for="item in proveUrl_list" @click="image_btn( 'https://cba360.com'+item)"
						style="width: 300rpx;height: 300rpx;display: flex;">
						<u-image style="width: 300rpx;height: 300rpx;display: flex;" width="300rpx" height="300rpx"
							:src="'https://cba360.com'+item"></u-image>
					</view>
				</view>
				<view class="i-row">驾驶员备注：{{obj.proveRemark?obj.proveRemark:''}}</view>



			</view>
			<view v-if='obj.abnormalityStatus =="WAIT_MANAGER_CHECK"'
				style="margin-top: 40rpx;margin-bottom: 30rpx;display: flex;justify-content:space-evenly;">
				<u-button style="width: 30vw;" @click="recognition_Btn2" type="warning">审核不通过</u-button>
				<u-button style="width: 30vw;" @click="recognition_Btn" type="primary">审核通过</u-button>

			</view>
		</view>

		<u-modal :title="delMd.tip" :confirm-style="{'color': '#00c3ce'}" v-model="delMd.state"
			:show-cancel-button="true" @confirm="okDelQj">
			<!-- <view class="c-yellow" :style="{'padding': '20rpx', 'text-align': 'center'}">{{delMd.tip}}</view> -->
			<!-- 	<u-input v-model="ps.proveRemark" type="textarea" border="true" /> -->
			<view style="width: 560rpx;margin: auto;">
				<u-input :border="true" v-model="ps.proveRemark" :type="'textarea'" :custom-style="{'color': '#00C3CE'}"
					:placeholderStyle="'color: #f000000;'" :clearable="false" :auto-height="true" :height="150"
					:placeholder="'备注'" />
			</view>

		</u-modal>
		<u-mask style="overflow: hidden;" :show="show" @click="show = false">
			<view style="width: 650rpx;height: 1000rpx;margin: auto;margin-top: 200rpx;">
				<u-image style="width: 650rpx;height: 1000rpx;margin: auto;margin-top: 200rpx;" width="650rpx"
					height="1000rpx" :src="imagee"></u-image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ps: {
					id: '',
					abnormalityStatus: '',
					proveUrl: '',
					proveRemark: '',
				},
				abnormalityUrl_list: [],
				proveUrl_list: [],
				// 详情
				obj: null,
				// 删除--弹框
				delMd: {
					state: false,
					title: '删除提示',
					tip: '', // 提示内容
					obj: null, // 参数对象
				},
				imagee: "",
				show: false,
			}
		},
		onLoad(ps) {
			this.getQjDetail(ps.id);
		},
		methods: {
			image_btn(e) {
				this.show = true
				this.imagee = e

			},
			// 获取-请假详情
			getQjDetail(id) {
				let that = this,
					U = that.U;

				U.qloading('加载中...');
				that.$u.api.getVehicleAbnormalityById({
					id: id
				}).then(res => {
					if (res.code == 1) {
						U.qclose();

						if (res.code != 1) {
							U.qerror(res.msg);
						} else {
							that.obj = res.data;
							that.abnormalityUrl_list = res.data.abnormalityUrl.split(",")
							that.proveUrl_list = res.data.proveUrl.split(",")
						}
					}
				}).catch(err => {
					U.qclose();
				});
			},

			recognition_Btn(e) {
				let that = this,
					U = that.U;
				that.ps.id = that.obj.id
				that.ps.abnormalityStatus = 'CHECKED'
				that.ps.proveUrl = ''
				that.ps.proveRemark = ''
				that.delMd = {
					state: true,
					title: '审核',
					tip: '确定审核通过吗？',
					obj: e.currentTarget.dataset.obj
				};
			},
			recognition_Btn2(e) {
				let that = this,
					U = that.U;
				that.ps.id = that.obj.id
				that.ps.abnormalityStatus = 'REFUESD'
				that.ps.proveUrl = ''
				that.ps.proveRemark = ''

				that.delMd = {
					state: true,
					title: '审核',
					tip: '确定审核不通过吗？',
					obj: ''
				};
			},
			// 确认删除-
			okDelQj() {
				let that = this,
					U = that.U,
					id = that.delMd.obj;

				that.$u.api.checkAbnormality(that.ps).then(res => {
					if (res.code == 1) {
						U.qsuccess(res.msg, 3000, function() {
							// 隐藏弹框
							that.delMd.state = false;

							// 调用父级onLoad中的刷新方法
							uni.$emit('refQjList');
							// 返回上一页
							uni.navigateBack({
								delta: 1
							});
						});
					} else {
						U.qerror(res.msg);
					}
				});
			},
		}
	}
</script>

<style>

</style>